<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="box">
            id: <input type="text" v-model="id">
            名字: <input type="text" v-model="name">
            <button @click='add'>添加</button>
        </div>
        <div v-for="item in list" v-model="item.id">{{item.id}}--{{item.name}} </div>






    </div>
</body>
<script src="./vue.js"></script>
<script>
    let VM = new Vue({
        el: '#app',
        data() {
            return {
                id: '',
                name: '',
                list: [
                    { id: 1, name: '赵高' },
                    { id: 2, name: '赵高' },
                    { id: 3, name: '赵高' },

                ]
            }
        },
        methods: {
            add() {
                this.list.push({ id: this.id, name: this.name })

            }
        },
    })

</script>

</html>